<style lang="less" scoped src="../public.less"></style>
<script src="./classroomlist.js"></script>
<template>
            <div>
                <div class="main-table" style="font-size: 15px;">
                    <Row align="middle">
                         <Col span="2">
                            教室名称:
                        </Col>
                        <Col span="5">
                            <Input  v-model="queryData.name" style="width: 98%"></Input>
                        </Col>
                        <Col span="2">
                        所在区域:
                        </Col>
                        <Col span="5">
                               <Select v-model="queryData.areaId">
                                      <Option v-for="item in areaList" :value="item.id" :key="item.id">{{item.name}}</Option>  
                             </Select>
                        </Col>
                        <Col span="8">
                            <div style="margin-left: 15px;">
                                <span @click="doQuery"><Button type="primary" icon="android-search">查询</Button></span>
                                <span @click="queryData={};doQuery();"><Button type="primary" icon="refresh">重置</Button></span>
                            </div>
                        </Col>
                    </Row>
                </div>
        <div class="main-table">
            <Table :columns="columns" :data="dataList" :highlight-row="true"
                   @on-row-click="setRow" @on-row-dblclick="classRoom = {}"></Table>
        </div>
        <div class="pagination">
            <Page border :total="total" size="small" :page-size="pageSize" :current.sync="pageIndex" @on-change="doQuery" show-total show-elevator></Page>
        </div>
    </div>
</template>

